<template>
	<div class="middle">
		<div class="middlebg"></div>
		<div class="top">
			<span class="teacher">课程表 <i class="el-icon-arrow-right"></i></span>
			<span class="back" @click="back">返回</span>
		</div>
		<el-card class="box-card">
			<div class="topMsg">
				<span class="title">{{semester}}</span>
				<div class="title2">
					<span class="postTimetable">查看往期课表</span>
					<!--查看往期课表-->
					<div class="oldTimetable">
						<div v-for="item in historyInfo" :key="item.id" @click="oldCourseInfo(item.get_school_year.id,item.semester)">{{item.get_school_year.year+item.semester}}</div>
					</div>
				</div>
			</div>
			<div class="planTable" v-model="options"><span v-for="item in options" :class ="{searchchange:changegreen == item.id}" :id="item.id" @click="gradeClass(item.id)">{{item.grade_title}}</span></div>
			<div class="timetable">
				<table style="color:#666" width="90%" height="395" border="1" cellpadding="3" cellspacing="0" >
					<tr>
						<td width="76"></td>
						<td width="56" height="50"> </td>
						<td width="100" class="week">星期一</td>
						<td width="100" class="week">星期二</td>
						<td width="100" class="week">星期三</td>
						<td width="100" class="week">星期四</td>
						<td width="100" class="week">星期五</td>
					</tr>
					<tr>
					<td rowspan="4" class="week">上午</td>
					<td>1</td>
						<td title="点击排课" rowspan="1" :id="11" @click="getcourseid(1+''+1)"></td>
						<td title="点击排课" rowspan="1" :id="21" @click="getcourseid(2+''+1)"></td>
						<td title="点击排课" rowspan="1" id="31" @click="getcourseid(3+''+1)"></td>
						<td title="点击排课" rowspan="1" id="41" @click="getcourseid(4+''+1)"></td>
						<td title="点击排课" rowspan="1" id="51" @click="getcourseid(5+''+1)"></td>
					</tr>
					<tr>
					<td>2</td>
						<td title="点击排课" rowspan="1" id="12" @click="getcourseid(1+''+2)"></td>
						<td title="点击排课" rowspan="1" id="22" @click="getcourseid(2+''+2)"></td>
						<td title="点击排课" rowspan="1" id="32" @click="getcourseid(3+''+2)"></td>
						<td title="点击排课" rowspan="1" id="42" @click="getcourseid(4+''+2)"></td>
						<td title="点击排课" rowspan="1" id="52" @click="getcourseid(5+''+2)"></td>
					</tr>
					<tr>
					<td>3</td>
						<td title="点击排课" rowspan="1" id="13" @click="getcourseid(1+''+3)"></td>
						<td title="点击排课" rowspan="1" id="23" @click="getcourseid(2+''+3)"></td>
						<td title="点击排课" rowspan="1" id="33" @click="getcourseid(3+''+3)"></td>
						<td title="点击排课" rowspan="1" id="43" @click="getcourseid(4+''+3)"></td>
						<td title="点击排课" rowspan="1" id="53" @click="getcourseid(5+''+3)"></td>
					</tr>
					<tr>
					<td>4</td>
						<td title="点击排课" rowspan="1" id="14" @click="getcourseid(1+''+4)"></td>
						<td title="点击排课" rowspan="1" id="24" @click="getcourseid(2+''+4)"></td>
						<td title="点击排课" rowspan="1" id="34" @click="getcourseid(3+''+4)"></td>
						<td title="点击排课" rowspan="1" id="44" @click="getcourseid(4+''+4)"></td>
						<td title="点击排课" rowspan="1" id="54" @click="getcourseid(5+''+4)"></td>
					</tr>
					<tr>
					<td rowspan="3" class="week">下午</td>
					<td>5</td>
						<td title="点击排课" rowspan="1" id="15"  @click="getcourseid(1+''+5)"></td>
						<td title="点击排课" rowspan="1" id="25" @click="getcourseid(2+''+5)"></td>
						<td title="点击排课" rowspan="1" id="35" @click="getcourseid(3+''+5)"></td>
						<td title="点击排课" rowspan="1" id="45" @click="getcourseid(4+''+5)"></td>
						<td title="点击排课" rowspan="1" id="55" @click="getcourseid(5+''+5)"></td>
					</tr>
					<tr>
					<td>6</td>
						<td title="点击排课" rowspan="1" id="16" @click="getcourseid(1+''+6)"></td>
						<td title="点击排课" rowspan="1" id="26" @click="getcourseid(2+''+6)"></td>
						<td title="点击排课" rowspan="1" id="36" @click="getcourseid(3+''+6)"></td>
						<td title="点击排课" rowspan="1" id="46" @click="getcourseid(4+''+6)"></td>
						<td title="点击排课" rowspan="1" id="56" @click="getcourseid(5+''+6)"></td>
					</tr>
					<tr>
					<td>7</td>
						<td title="点击排课" rowspan="1" id="17" @click="getcourseid(1+''+7)"></td>
						<td title="点击排课" rowspan="1" id="27" @click="getcourseid(2+''+7)"></td>
						<td title="点击排课" rowspan="1" id="37" @click="getcourseid(3+''+7)"></td>
						<td title="点击排课" rowspan="1" id="47" @click="getcourseid(4+''+7)"></td>
						<td title="点击排课" rowspan="1" id="57" @click="getcourseid(5+''+7)"></td>
					</tr>
				</table>
			</div>
			<el-dialog title="排课" :visible.sync="showTable" class="addTable" :before-close="handleDialogClose">
			  <el-form label-width="100px" label-position="right">
			    <el-form-item label="当前排课年级:" style="margin-bottom: 0;">
					<span class="gradeTitle">{{gradeName}}</span>
			    </el-form-item>
			    <el-form-item label="已选课:">
			      <span>{{selectedCourse}}</span>
			    </el-form-item>
			    <el-form-item>
			      <div class="className" v-for="item in className" :id="item.id+'0'"  @click="selectClass(item.id+'0')">{{item.class_name}}</div>
			    </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="insertCourseInfo"><i class="el-icon-check"></i>保存</el-button>
			  </div>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				options: [],//年级
				optionsId:[],//所有年级id
				changegreen:true,
        value: '1',
        month:'',
        showTable:false,
        semester:'',
        gradeName:'',
        week:'',
        href:'',
        course:'',
        selectedCourse:'',
        className:'',
        classId:'',//班级id
				someClass:[],//选择的班级
        school_year_id:'',//学年id
        semesterNum:'',//上学期还是下学期
        mark:'',//第几节课
        weeks:'',//第几周
        classInfo:[],//存放首页信息
        weekMark:'',//第几周和第几节课拼接
        tdId:'',//每个空的id
        oldClassId:'',//旧的班级id
        semesterName:'',//查看往期课表的学期（上学期还是下学期）
        oldSemesterName:[],//查看往期课表的学期（哪年哪学期）
        historyInfo:[],//历史课程
				classArr:[],//存放排课部分的年级id
				a:[],//班级id
				c:[],//课程信息id
				allClassId:[],//所有班级id
				classObj:{},//已选班级
				delClass:[],//删除的班级id
			}
		},
		methods:{
			//返回上一页
			back(){
				this.$router.push({name:'teaching'})
			},
			//年级改变事件
			gradeClass(id) {
				this.changegreen = id
				if(!this.value) {
					$('#'+id).css({"background": "#00B02D"})
					this.value = id
				}else if(id ==this.value){
					$('#'+id).css({"background": "#ccc"})
				}else if(id != this.value) {
					$('#'+id).css({"background": "#00B02D"})
					$('#'+this.value).css({"background": "#ccc"})
					this.value = id
				}
				this.getInfo()
			},
			//课程首页
			getInfo(){
				this.$http.post('/api/course/getInfo',{
					grade_id:this.value,
				}).then(res=>{
					this.classInfo = res.data.data
					var arr=['11','12','13','14','15','16','17','21','22','23','24','25','26','27','31','32','33','34','35','36','37',
			       			'41','42','43','44','45','46','47','51','52','53','54','55','56','57']
					for(var i=0; i<arr.length;i++){
							$('#'+arr[i]).html('')
							$('#'+arr[i]).attr('c_id','')
							$('#'+arr[i]).attr('a_id','')
						}
					if(this.classInfo.length == 0){
						return
					}else {
						for(var i = 0; i<this.classInfo.length; i++){
							this.weekMark = this.classInfo[i].week+this.classInfo[i].mark
							//c_id课程信息id
							var c_id = $('#'+this.weekMark).attr('c_id')
							if(c_id.length == 0){
								$('#'+this.weekMark).attr('c_id',this.classInfo[i].id)
							}else {
								var a = $('#'+this.weekMark).attr('c_id')
								a = a+"_"+this.classInfo[i].id
								$('#'+this.weekMark).attr('c_id',a)
							}
							//a_id班级id
							var a_id = $('#'+this.weekMark).attr('a_id')
							if(a_id.length == 0){
								$('#'+this.weekMark).attr('a_id',this.classInfo[i].get_class.class_id)
							}else {
								var b = $('#'+this.weekMark).attr('a_id')
								b= b+"_"+this.classInfo[i].get_class.class_id
								$('#'+this.weekMark).attr('a_id',b)
							}
							if($.inArray(this.weekMark,arr)>-1){
								$('#'+this.weekMark).append((this.classInfo[i].get_grade.grade_title+this.classInfo[i].get_class.class_name)+'</br>')
								localStorage.setItem(this.weekMark,this.classInfo[i].id)
							}
						}
					}
				})
			},
			//获取年级学年
			getSchoolYearGradeInfo(){
				//首页信息
				this.$http.post('/api/program/getInfo')
					.then(res=>{
						this.options = res.data.data.gradeInfo
						var optionId =[]
						res.data.data.gradeInfo.map(item=>{
							optionId.push(item.id)
						})
						this.optionsId = optionId
						if(this.month<7&& this.month>1) {
							this.semester =res.data.data.schoolYearInfo.year+' 下学期 '+'('+ res.data.data.schoolYearInfo.start+'-'+res.data.data.schoolYearInfo.end+')'
							this.semesterNum = 2
						}else {
							this.semester =res.data.data.schoolYearInfo.year+' 上学期 '+'('+ res.data.data.schoolYearInfo.start+'-'+res.data.data.schoolYearInfo.end+')'
							this.semesterNum = 1
						}
						this.school_year_id = res.data.data.schoolYearInfo.id
					})
				//历史课表名称
				this.$http.post('/api/course/historyCourseInfo')
					.then(res=>{
						this.historyInfo = res.data.data
					})
				$('#1').css({"background": "#00B02D"})
			},
			//获取当前月份
			formatDate(){
				var data = new Date();
				var Month = data.getMonth();
				this.month = Month
			},
			//选择哪个班级
			selectClass(classId){
				this.classId = classId/10
				if($.inArray(this.classId,this.someClass) > -1){
					$('#'+this.classId*10).css({"background": "#ccc"})
					var keys = this.someClass.indexOf(this.classId)
					if(keys >-1) {
						this.someClass.splice(keys,1)
					}
				}else if($.inArray(this.classId,this.someClass) == -1 && $.inArray(this.classId+"",this.a) == -1){
					$('#'+this.classId*10).css({"background": "#00B02D"})
					this.someClass.push(this.classId);
					if($.inArray(this.classId+"",this.delClass) >-1) {
						var keys = this.delClass.indexOf(this.classId)
						this.delClass.splice(keys,1)
					}
				}
				if($.inArray(this.classId+"",this.a) > -1){
					$('#'+this.classId*10).css({"background": "#ccc"})
					var keys = this.a.indexOf(this.classId+"")
					if(keys > -1) {
						this.a.splice(keys,1)
						this.delClass.push(this.classObj[this.classId])
					}

				}
			},
			async getcourseid(id){
				this.c = $('#'+id).attr('c_id').split('_')
				this.a = $('#'+id).attr('a_id').split('_')
				//未选年级提示
				if(this.value == '') {
					this.$alert('请选择年级', '提示', {
					  confirmButtonText: '确定',
					});
					return
				}
				this.tdId = id
				this.showTable = true
				//判断是几年级
				if(this.value == 1) {
					this.gradeName = '一年级'
				}else if(this.value == 2){
					this.gradeName = '二年级'
				}else if(this.value == 3){
					this.gradeName = '三年级'
				}else if(this.value == 4){
					this.gradeName = '四年级'
				}else if(this.value == 5){
					this.gradeName = '五年级'
				}else if(this.value == 6){
					this.gradeName = '六年级'
				}
				//判断是周几
				var firstId =parseInt(id.substr(0,1))
				if(firstId == 1) {
					this.week = '周一'
					this.weeks = firstId
				}else if(firstId == 2) {
					this.week = '周二'
					this.weeks = firstId
				}else if(firstId == 3) {
					this.week = '周三'
					this.weeks = firstId
				}else if(firstId == 4) {
					this.week = '周四'
					this.weeks = firstId
				}else if(firstId == 5) {
					this.week = '周五'
					this.weeks = firstId
				}
				var lastId = parseInt(id.substr(1,1))
				//判断上午还是下午
				if(lastId <5) {
					this.href = '上午'
				}else {
					this.href = '下午'
				}
				//判断第几节课
				if(lastId == 1) {
					this.course ='第一节课'
					this.mark = lastId
				}else if(lastId == 2) {
					this.course ='第二节课'
					this.mark = lastId
				}else if(lastId == 3) {
					this.course ='第三节课'
					this.mark = lastId
				}else if(lastId == 4) {
					this.course ='第四节课'
					this.mark = lastId
				}else if(lastId == 5) {
					this.course ='第五节课'
					this.mark = lastId
				}else if(lastId == 6) {
					this.course ='第六节课'
					this.mark = lastId
				}else if(lastId == 7) {
					this.course ='第七节课'
					this.mark = lastId
				}
				this.selectedCourse =this.week+' '+this.href+' '+this.course
				//查看年级的班级信息
				await this.$http.post('/api/course/getGradeClassInfo',{
					grade_id:this.value
				}).then(res=>{
					this.className = res.data.data
					var allClassId = []
					this.className.map(item=>{
						allClassId.push(item.id)
					})
					this.allClassId = allClassId
				})
				for(var i = 0; i <this.allClassId.length; i++){
					if($.inArray(this.allClassId[i]+"",this.a)>-1) {
						$('#'+this.allClassId[i]*10).css({"background":"#00B02D"})
					}
				}
				var obj ={}
				for(var i = 0; i<this.a.length; i++){
					obj[this.a[i]] = this.c[i];
				}
				this.classObj = obj
				if(!$('#'+this.tdId).html()){
					$('#'+this.classId+'0').css({"background":"#ccc"})
				}
			},
			handleDialogClose(){
				for(var i = 0; i<this.allClassId.length; i++) {
					$('#'+this.allClassId[i]*10).css({"background":"#ccc"})
				}
				this.showTable = false
			},
			async insertCourseInfo(){
				//排课
				if(!$('#'+this.tdId).html()){
					await this.$http.post('/api/course/insertCourseInfo',{
						grade_id:this.value,
						class_id:this.someClass,
						school_year_id:this.school_year_id,
						semester:this.semesterNum,
						mark:this.mark,
						weeks:this.weeks,
					}).then(res=>{
						if(res.data.code == 200) {
							this.$message({
								type:'success',
								message:res.data.msg
							})
							this.showTable = false
							for(var i = 0; i<this.allClassId.length; i++) {
								$('#'+this.allClassId[i]*10).css({"background":"#ccc"})
							}
							this.delClass = []
							this.someClass = []
							this.a = []
							this.c = []
							this.getInfo()
						}else if(res.data.errorCode == 400){
							this.$message({
								type:'error',
								message:res.data.msg
							})
						}
					})
				}else {
					this.oldClassId = localStorage.getItem(this.tdId)
					if(this.someClass.length == 0 && this.delClass.length >0){
						//删除
						await this.$http.post('/api/course/deleteCourseInfo',{
							id:this.delClass,
						}).then(res=>{
							if(res.data.code == 200){
								this.$message({
									type:'success',
									message:res.data.msg
								})
								$('#'+this.tdId).html('')
								this.showTable = false
								this.getInfo()
								for(var i = 0; i<this.allClassId.length; i++) {
									$('#'+this.allClassId[i]*10).css({"background":"#ccc"})
								}
								this.delClass = []
								this.someClass = []
								this.a = []
								this.c = []
							}else if(res.data.errorCode == 400){
								this.$message({
									type:'error',
									message:res.data.msg
								})
							}
						})
					}else {
						//修改
						await this.$http.post('/api/course/updateCourseInfo',{
							grade_id:this.value,
							class_id:this.someClass,
							school_year_id:this.school_year_id,
							semester:this.semesterNum,
							mark:this.mark,
							weeks:this.weeks,
							del_id:this.delClass,
						}).then(res=>{
							if(res.data.code == 200){
								this.$message({
									type:'success',
									message:res.data.msg
								})
								this.showTable = false
								for(var i = 0; i<this.allClassId.length; i++) {
									$('#'+this.allClassId[i]*10).css({"background":"#ccc"})
								}
								this.delClass = []
								this.someClass = []
								this.a = []
								this.c = []
								this.getInfo()
							}else if(res.data.errorCode == 400){
								this.$message({
									type:'error',
									message:res.data.msg
								})
							}
						})
					}
				}

			},
			//查看历史课表
			oldCourseInfo(id,semester){
				this.$http.post('/api/course/getHistoryCourseInfo',{
					semester:semester,
					school_year_id:id,
				}).then(res=>{
					this.classInfo = res.data.data
					var arr=['11','12','13','14','15','16','17','21','22','23','24','25','26','27','31','32','33','34','35','36','37',
			       			'41','42','43','44','45','46','47','51','52','53','54','55','56','57']
					for(var i=0; i<arr.length;i++){
							$('#'+arr[i]).html('')
						}
					if(this.classInfo.length == 0){
						return
					}else {
						for(var i = 0; i<this.classInfo.length; i++){
							this.weekMark = this.classInfo[i].week+this.classInfo[i].mark
							if($.inArray(this.weekMark,arr)>-1){
								$('#'+this.weekMark).html(this.classInfo[i].get_grade.grade_title+this.classInfo[i].get_class.class_name)
								localStorage.setItem(this.weekMark,this.classInfo[i].id)

							}
						}
					}

				})
			}
		},
		created(){
			this.getSchoolYearGradeInfo()
			this.formatDate()
			this.getInfo()
		}
	}
</script>
<style>
	.el-main {
		padding: 0;
	}
	.middle {
	    height: 100%;
	    width: 100%;
	    background-repeat:repeat;
	    background-size: contain;
	    background-position: center;
	    background-attachment: fixed;
	    z-index: -1;
	}
	.el-dialog__body {
		padding: 0px 20px;
	}

</style>
<style lang="less" scoped>

	.middlebg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: url(../../assets/image/bg-img.png) no-repeat center;
		background-size: 100%;
	}
	.top {
		height: 50px;
		line-height: 50px;
		background-color: #dbdbdb;
		position: relative;
		.teacher {
			display: inline-block;
			background: #00b02d;
			padding:0 15px;
			color: #fff;
		}
		.back {
			position: absolute;
			right: 0;
			background: #9cbf83;
			padding: 0 15px;
			border-radius: 3px;
			color: #fff;
			cursor: pointer;
		}
	}
	.box-card {
		margin: 30px 50px;
		.topMsg {
			text-align: center;
			position:relative;
			padding-top:20px;
			height: 30px;
			/deep/.el-input__inner {
				background: #00B02D;
				color: #fff;
			}
			/deep/.el-select .el-input .el-select__caret {
					color: #fff;
				}
			.title {
				color: #00B02D;
				font-size: 18px;
				font-weight: 700;
				height: 25px;
				position: relative;
				top: 4px;
			}
			.title2 {
				&:hover {
					.oldTimetable {
							display: block;
						}
					}
				.oldTimetable {
					width: 200px;
					background: #fff;
					border: 1px solid #ccc;
					z-index:2;
					position: absolute;
					top: 43px;
					right: 0;
					display: none;
					div {
						height: 40px;
						line-height: 40px;
						border-bottom: 1px solid #ccc;
						&:hover {
							cursor: pointer;
							background: #ccc;
						}

					}
				}
				.postTimetable {
					font-size: 14px;
					position: absolute;
					width: 100px;
					top: 25px;
					right: 10px;
					text-decoration: underline;
					cursor: pointer;
					&:hover {
						.oldTimetable {
							display: block;
						}

					}
				}
			}

		}

		.planTable {
			margin-top: 20px;
			margin-left: 70px;
			.searchchange {
				background: #00b02d;
			}
			span {
				display: inline-block;
				padding: 0 10px;
				margin-right: 20px;
				height: 30px;
				line-height: 30px;
				background: #ccc;
				border-radius: 5px;
				cursor: pointer;
			}
		}
		.timetable {
			background: #fff;
			width: 100%;
			margin-top:1%;
	    	position: relative;
	    	h1 {
				height: 60px;
				line-height: 60px;
				position: relative;
				.left {
					position: absolute;
					top: 15px;
					left: 60px;
				}
				.right {
					position: absolute;
					top: 15px;
					right: 68px;
				}
			}
			table {
				margin-left: 60px;
				text-align: center;
				margin-bottom: 20px;
				border: 1px solid #bbb;
				.week {
					color: #232222;
					font-weight: 700;
				}
				td {
					font-size: 14px;
					padding: 5px 0;
					border: 1px solid #bbb;
					cursor: pointer;
					.obj {
						font-size: 8px;
						color: #00B02D;
					}
					&:hover {
						background: #eee;
					}
				}
			}
		}
	}
	.addTable {
		.gradeTitle {
			color: #00B02D;
		}
		.className {
			display: inline-block;
			width: 60px;
			height: 30px;
			line-height: 30px;
			background: #ccc;
			text-align: center;
			margin-right:20px ;
			border-radius: 5px;
			cursor: pointer;
		}
	}

</style>
